<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>翻页示例</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .page {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }

    .page1 {
      background-color: #f0f0f0;
    }

    .page2 {
      background-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <div class="page page1" id="page1">
    <p>第一页</p>
  </div>
  <div class="page page2" id="page2">
    <p>第二页</p>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var currentPage = 1;
      var totalPages = 2;

      // 监听鼠标滚动事件
      document.addEventListener('wheel', function (event) {
        if (event.deltaY > 0) {
          nextPage();
        } else {
          prevPage();
        }
      });

      // 监听点击事件
      document.addEventListener('click', function () {
        nextPage();
      });

      function nextPage() {
        if (currentPage < totalPages) {
          currentPage++;
          scrollToPage(currentPage);
        }
      }

      function prevPage() {
        if (currentPage > 1) {
          currentPage--;
          scrollToPage(currentPage);
        }
      }

        function scrollToPage(page) {
            var targetPage = document.getElementById('page' + page);
            if (targetPage) {
            targetPage.scrollIntoView({ behavior: 'smooth' });
            }
        }
    });
  </script>
</body>
</html>
